<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
     <div id="captureId" class="invitationCode"  v-show="firstFlag">
      <div class="code_box">
        <div class="title">推荐好友领福利</div>
        <div class="content">
          <div id="qrcode" class="code" ref="qrCodeDiv"></div>
          <div class="text4">长按保存二维码可分享</div>
        </div>
      </div>
    </div>
    <div v-show="!firstFlag">
      <img class="code_img" :src="canvasImageUrl" alt />
    </div>
  </div>
</template>

<script>

import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'
// import a from './a'; // 引入组件
export default {
  name: '',
  data() {
    return {
      msg: '测试',
       firstFlag: true,
      canvasImageUrl: ""
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
        this.qrcode();
    this.$nextTick(function() {
      this.createPicture(); // 二维码生成后，执行生成图片
    });
  },
  // Vue方法定义
  methods: {
       qrcode() {
      new QRCode(this.$refs.qrCodeDiv, {
        width: 150,
        height: 150,
        text: "http://192.168.1.128:8888/#/MacoAge", // 二维码地址
        colorDark: "#000",// 二维码颜色
        colorLight: "#fff"// 二维码背景色
      });
    },
    createPicture() {
      // alert("11111");
      html2canvas(document.querySelector("#captureId"))
        .then(canvas => {
          var imgData = canvas.toDataURL("image/jpeg");
          this.canvasImageUrl = imgData;
          this.firstFlag = false;
        })
        .catch(error => {});
    },
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
img{
  width: 250px;
}
</style>